<template>
	<view>
		<div class="top">
			<div class="xxxg">
				<uni-card class="xxxg-card" title=""  >
					<uni-section title="请选择头像" type="line">
								<div class="custom-image-box-top">
								<view class="custom-image-box">
								
									<div class="c-i-b-left">
									<text class="text">选择头像</text>
									</div>
									<div class="c-i-b-right">
									<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
										file-mediatype="image">选择</uni-file-picker>
									</div>
									
								</view>
								</div>
							</uni-section>
							<div class="card-button">
								<div class="card-button1">
									<button class="card-qxan" @click="tzgrxx">取消</button>
									</div>
								<div class="card-button2">
									<button class="card-qran" @click="tomy">确认</button>
									</div>
							</div>
				</uni-card>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					imageStyles: {
									width: 64,
									height: 64,
									border: {
										radius: '50%'
									}
								},
			}
		},
		methods: {
			tzgrxx(){
				uni.navigateTo({
					url: "/pages/my/grxx/grxx"
				})
			},
			tomy(){
				uni.switchTab({
					url: "/pages/my/my"
				})
			}
		}
	}
</script>

<style>
.top{
	width: 750rpx;
	height: 400rpx;
	background-color: #3183FC;
		/* 	overflow: hidden; */
	/* 	background-image: url(@/static/wdimg/aaa.jpg); */
	position: relative;
}

.xxxg{
	position: absolute;
	width: 750rpx;
	
}

/* 	.example-body {
		padding: 10px;
		padding-top: 0;
	} */

	.custom-image-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* background-color: red; */
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		
	}
	.custom-image-box-top{
	
		border-top: 1rpx solid silver;
	}
	
	.xxxg-card{
		height: 500rpx;
	/* 	width: 750rpx; */
		border-radius: 25rpx;
	}
	
	.c-i-b-left{
		font-size: 35rpx;
		margin-left: 20rpx;
	}
	
	.c-i-b-right{
		margin-right: 20rpx;
	}
	
	
	.card-button{	
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
	}
	
	.card-button1{
		width: 250rpx;
	}
	
	.card-button2{
		width: 250rpx;
	}
	
	.card-qxan{
		background-color: #fbb1a2;
		color: white;
	}
	
	.card-qran{
		background-color: #bae3eb;
		color: white;
	}
</style>
